<template>
    <div class="index">
        <div class="a" >
            <cate ></cate>
        </div>
        <div class="b" >
            <news :auto="auto" :one="one" ref="news"></news>
        </div>
        <div class="b">
            <news :auto="hot" :one="two" ref="hot"></news>
        </div>
        <div class="a">
            <brand :one="three"></brand>
        </div>
        <div class="b">
            <AllView></AllView>
        </div>
        <div class="a">
            <special></special>
        </div>
    </div>
</template>


<script>
import { server } from '@/Api/constUp'
import cate from '@/components/index/BannerView.vue'
import news from '@/components/index/NewView.vue'
import brand from '@/components/index/BrandView.vue'
import AllView from '@/components/index/AllView.vue'
import special from '@/components/index/SpecialView.vue'
import { getNew, getHot } from '@/Api/homeapi'
export default {
    components: { cate, news, brand, AllView, special },
    data() {
        return {
            auto: [],
            hot: [],
            one: {
                title: '新鲜好物',
                desc: '新鲜出炉  品质靠谱',
                right: '查看全部 >',
                bj: '#f0f9f4',
                color: 'red',
                q: '¥'
            },
            two: {
                title: '人气推荐',
                desc: '人气爆款  不容错过',
                right: '',
                bj: 'white',
                color: 'gray'
            },
            three: {
                title: '热门品牌',
                desc: '国际经典 品质保证',

            }
        }
    },
    methods: {
        async getAuto() {
            let { data: res } = await getNew()
            this.auto = res.result
        },
        async getHots() {
            let { data: res } = await getHot()
            // console.log(res);
            // this.hot = res.result
            res.result.forEach(item => {
                let obj = {
                    picture: item.picture,
                    id: item.id,
                    desc: item.title,
                    price: item.alt
                }
                this.hot.push(obj)
            })
            // console.log(this.hot);
        }
    },
    computed: {

    },
    mounted() {
        // this.getAuto()
        // this.getHots()

        // console.log(this.$refs.news.$el);
        server(this.$refs.news.$el, this.getAuto)
        server(this.$refs.hot.$el, this.getHots)
    }
}
</script>
<style lang="scss" scoped>
.a {
    width: 100%;
    background: #f5f5f5;

}

.b {
    width: 100%;
    background: white;

}
</style>